<template>
  <div id="test" >
    <span>页面载入时，input 元素自动获取焦点：</span>
    <input v-focus><br/>
    <p @click="startActivity()" class="bt">跳转activity</p>
    <p @click="testView()" class="bt">自定义View</p>
    <p @click="getCamera()" class="bt">相机测试</p>
    <p @click="test()" :class="classObject">测试混入 classObject</p>
    <p @click="test()" v-bind:style="styleObject">测试混入 styleObject</p>
    <p @click="getImage" :style="styleObject">显示本地图片</p>
    <input ref="filElem" type="file" class="upload-file"  accept="image/jpg" multiple="multiple" @change="getFile()"/></br>
    <input type="file" accept="image/*" capture="camera"></br>
    <input type="file" accept="video/*" capture="camcorder"></br>
    <input type="file" accept="audio/*" capture="microphone"></br>


  </div>

</template>

<script>
//混入
var mixin = {
  created: function () {
    console.log(this.$route);
    console.log(this.$router);
    console.log('混入对象的钩子被调用');
  },
  methods: {
    foo: function () {
      console.log('混入对象调用foo');
    },
    conflicting: function () {
     console.log('conflicting');
   }
 }
};

export default {
  name: 'Test',
  created: function () {
    console.log('组件钩子被调用');
  },
  data:function(){
   return {
    isShow:true,
    classObject: {
      bt:true
    },
    styleObject: {
      color: 'red',
      fontSize: '10px',
      margin:'5px',
      padding:'5px',
    },
    lists:[
    {text:"主页"},
    {text:"工作日志"},
    {text:"设备运行记录"},
    {text:"其他"}
    ]
  }
},
mixins: [mixin],
methods:{

  test:function(){
      this.foo();  //调组件的foo
      this.conflicting(); //组件没有定义 调用混入
  },

  foo:function(){
        alert('组件调用foo');
  },

  getCamera: function(){
    alert("getCamera2");
  },

   getImage(){
     //命名路由 http://192.168.11.224:8686/#/openOrders/12
     this.$router.push({name:'openOrders',params:{id:12}});
   },

    startActivity(){
      var extraInfo = cordova.require('cordova_StartActivityPlugin.StartActivityPlugin');
      try{
        extraInfo.start(
          [{action:"TestLifecycle"}],
          function(message) {
           alert(JSON.stringify(message));
         }, 
         function(message) {
          alert(JSON.stringify(message));
        });
      }catch(e){
        alert(e);
      }

    },
    testView(){
      var extraInfo = cordova.require('cordova_StartActivityPlugin.StartActivityPlugin');
      try{
        extraInfo.start(
          [{action:"CustomViewTest"}],
          function(message) {
           alert(JSON.stringify(message));
         }, 
         function(message) {
          alert(JSON.stringify(message));
        });
      }catch(e){
        alert(e);
      }
    },
    getFile(){
      var that = this;
      const inputFile = this.$refs.filElem.files[0];
      if(inputFile){

        if(inputFile.type !== 'image/jpeg' && inputFile.type !== 'image/png' && inputFile.type !== 'image/gif'){
          alert('不是有效的图片文件！');
          return;
        }
        this.imgInfo = Object.assign({}, this.imgInfo, {
          name: inputFile.name,
          size: inputFile.size,
          lastModifiedDate: inputFile.lastModifiedDate.toLocaleString()
        })
        const reader = new FileReader();
        reader.readAsDataURL(inputFile);
        reader.onload = function (e) {
          that.imgSrc = this.result;
        }
      } else {

        return;
      }
    }

  },

  directives: {
    // 注册一个局部的自定义指令 v-focus
    focus: {

      bind: function(el,binding,vnode){
        console.info('bind : binding.name:'+binding.name);
      },
      // 指令的定义
      inserted: function (el) {
        console.info('inserted');
        // 聚焦元素
        el.focus()
      },

      update: function(el,binding){
        console.info('update : binding.name:'+binding.name);
      }

    }
  }
}


</script>

<style>

#test{
  font-size:16px;
  width:100%;
  text-align: center;
}

p.bt{
  margin-top:5px;
  padding:5px;
  background-color:#888888;
  color:white;
  text-align:center;
}
input{
  width:300px;
}


</style>

